<template>
  <div id="app">
    <el-row class="chat-container">
      <el-col :span="4">
        <div class="chat-contactlist">
          <el-button v-for="(contact, index) in contactList" :key="index" @click="selectContact(contact)">
            {{ contact.name }}
          </el-button>
        </div>
      </el-col>

      <el-col class="chat-message">
        <el-main class="message-display">
          <div class="message">
            <!-- <span class="message-username">{{ selectedContact.username }}</span> -->
            <!-- <span class="message-time">{{ formatDate(selectedContact.time) }}</span> -->
            <p>{{ selectedContact.content }}</p>
          </div>
        </el-main>
        <el-footer class="message-editor">
          <textarea v-model="messageInput" placeholder="输入消息..."></textarea>
          <div class="message-buttons">
            <el-button @click="sendMessage">发送</el-button>
            <el-button @click="sendFile">发送文件</el-button>
          </div>
        </el-footer>
      </el-col>

      <el-col class="chat-remark">
        <p>ip地址：{{ selectedContact.ip }}</p>
        <p>联系人邮件：{{ selectedContact.email }}</p>
        <p>联系人电话：{{ selectedContact.phone }}</p>
        <!-- <p>联系人电话：{{ selectedContact.phone }}</p> -->

      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import VueCookies from 'vue-cookies'
import { getCurrentInstance, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// const { proxy } = getCurrentInstance();

export default {
  setup() {
    const contactList = ref([])
    const selectedContact = ref({})
    const messageInput = ref('')

    const router = useRouter()
    const loginInfo = VueCookies.get('loginInfo')
    const account = loginInfo ? loginInfo.account : null

    const getMessages = async () => {
      const data = {
        userAccount: account
      }
      const url = 'http://localhost:8081/api/getMessages'
      try {
        const res = await axios.post(url, data)
        console.log(res);
        if (res.data.code === 2000) {
          contactList.value = res.data.tableData

          console.log(contactList.value)
        } else {
          // proxy.$message.error(res.data.message)
        }
      } catch (e) {
        console.log(e)
        // proxy.$message.error('获取失败')
      }
    }

    const selectContact = (contact) => {
      selectedContact.value = contact
    }

    const formatDate = (time) => {
      // 格式化时间的逻辑
    }

    const sendMessage = () => {
      // 发送消息的逻辑
    }

    const sendFile = () => {
      // 发送文件的逻辑
    }

    onMounted(() => {
      getMessages()
    })

    return {
      contactList,
      selectedContact,
      messageInput,
      selectContact,
      formatDate,
      sendMessage,
      sendFile
    }
  }
}
</script>

<style>
.chat-container {
  display: flex;
  height: 100%;
  border: 1px solid #ccc;
  padding: 30px;
}

.chat-contactlist {
  flex-basis: 20%;
  height: 100%;
  border: 1px solid #ccc;
  margin-right: 10px;
  /* 添加间隙 */
}

.chat-contactlist button {
  margin-bottom: 10px;
  display: block;
  width: 90%;
}

.chat-message {
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #ccc;
  margin: 0 10px;
  /* 添加间隙 */
}

.message-display {
  height: 50%;
  /* overflow-y: scroll; */
  border: 1px solid #ccc;
  padding: 10px;
}

.message-editor {
  display: flex;
  align-items: center;
  margin-top: 10px;
  /* 添加间隙 */
}

.message-editor textarea {
  flex-grow: 1;
  height: 80px;
  padding: 5px;
}

.message-buttons {
  margin-left: 10px;
}

.chat-remark {
  flex-basis: 20%;
  border: 1px solid #ccc;
  margin-left: 10px;
  /* 添加间隙 */
}

.chat-remark p {
  margin-bottom: 10px;
}</style>
